<template>
	<view>
		<c-layout>
			<c-navigation-bar slot="head" :title="$t('product.productDetail')" titleColor=" #000000"></c-navigation-bar>

			<view class="top-box">
				<uni-tooltip :content="productDetail.name">
					<view class="tittle-name">
						<image src="../../static/images/justify.png" mode=""></image>
						<view class="">{{ productDetail.name }}</view>
					</view>
				</uni-tooltip>
				<view class="count-name">
					<view class="count-box">
						<view class="tittle1">{{ productDetail.amount }}</view>
						<view class="tittle2">{{$t('product.Investment') }}($)</view>
					</view>
					<view class="count-box">
						<view class="tittle1">{{ productDetail.totalRevenue }}</view>
						<view class="tittle2">{{$t('product.TotalRevenue') }}($)</view>
					</view>
					<view class="count-box">
						<view class="tittle1">{{ productDetail.day }}</view>
						<view class="tittle2">{{`${$t('product.EarningCycle')}(${$t('product.day')}) `}}</view>
					</view>
				</view>
			</view>

			<view class="data-box">
				<view class="property form-name">
					<view class="">{{$t('product.EarningCycle') }}</view>
					<view class="">{{$t('product.Investment') }}</view>
					<view class="">{{$t('product.Earnings') }}</view>
				</view>
				<view class="">
					<view class="property info-box" v-for="(item, index) in productDetail.day" :key="index">
						<view class="">{{ `${index + 1} ${$t('product.day')}`}} </view>
						<view class="">{{ productDetail.amount }}</view>
						<view class="">${{ Number(productDetail.amount) * Number(productDetail.interestRate) }}</view>
					</view>
				</view>
			</view>

			<view class="bottom-box">
				<u-icon name="server-fill" @click="Customer_service" color="#000" size="60"></u-icon>
				<view class="buy-box" @click="handleBuy" :class="isBuy === 'true' ? 'isbuy' : ''">
					{{$t('product.buyQuickly') }}
				</view>
				<view class="hold-box" @click="handleHold">{{$t('product.Held') }}</view>
			</view>

			<inputPayPassword @finish="payPwdPopFinish" :payPwdPopShow.sync="payPwdPopShow"
				:amount="publicJS.toFixed(productDetail.amount)" :maxlength="6" @close="payPwdPopClose">
			</inputPayPassword>
			
			<u-popup v-model="showContact" mode="bottom" :mask-close-able="false" height="100%" negative-top='40'>
				<u-icon class="closeIcon" @click="popupclose()" name="close"></u-icon>
				<view class="rich-text">
					<rich-text :nodes="content"></rich-text>
				</view>
				<view class="container-box">
					<signCard @src="src" :height="'220rpx'"></signCard>
				</view>
				<view class="sign-btn" @click="signContract">{{$t('system.affirm') }}</view>
			</u-popup>
		</c-layout>
		<promptDialog ref="promptDialog"></promptDialog>
		<!-- 客服弹窗 -->
		<u-popup v-model="customerServiceShow" mode="bottom" border-radius="14" height="520rpx">
			<view class="customerServiceBox">
				<view class="" style="width: 100%;height: 40rpx;text-align: center;">
					{{$t('user.customerService')}}
				</view>
				<view class=""
					style="width: 100%;height: 80rpx;text-align: center;margin: 40rpx 0;font-size: 12px;color: #ccc;">
					<p> {{$t('user.customerServiceTips1')}}</p>
					<p> {{$t('user.customerServiceTips2')}}</p>
				</view>
				<view class="" style="display: flex; justify-content: space-around;">
					<view class="" @click="publicJS.noOpen(()=>toCustomer(urlList[0]))">
						<view class="iconBox">
							<image style="width: 60rpx; height: 60rpx;" referrerpolicy="no-referrer"
								:src="require('@/static/images/cs2.png')" />
						</view>
						<view class="">
							Support
						</view>
					</view>
					<view class="" @click="toCustomer(urlList[1])">
						<view class="iconBox">
							<image style="width: 60rpx; height: 60rpx;" referrerpolicy="no-referrer"
								:src="require('@/static/images/cs3.png')" />
						</view>
						<view class="">
							Telegram
						</view>
					</view>
					<view class="" @click="toCustomer(urlList[2])">
						<view class="iconBox">
							<image style="width: 60rpx; height: 60rpx;" referrerpolicy="no-referrer"
								:src="require('@/static/images/cs1.png')" />
						</view>
						<view class="">
							WhatsApp
						</view>
					</view>
		
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		boolean
	} from 'mathjs';
	export default {
		data() {
			return {
				// 客服弹窗
				customerServiceShow: false,
				urlList: ['https://www.baidu.com/', 'www.baidu.com', 'www.baidu.com'],
				//当前用户等级
				userLevel: null,
				//购买此产品需要的用户等级
				limitUserLevel: null,
				payPassword: null,
				financialId: null,
				showContact: false,
				payPwdPopShow: false,
				content: '',
				content1: '',
				productDetail: {},
				code: null,
				isBuy: ''
			};
		},
		onLoad(data) {

			this.financialId = data.id;
			this.isBuy = data.type;
			this.limitUserLevel = data.limitLevel
			this.$u.get(`/app/financial/online/detail/${data.id}`).then((d) => {
				this.productDetail = d.data;
			});
			this.getUserInfo()
			console.log(this.limitUserLevel);
		},
		methods: {
			getUserInfo() {
				this.$u.get(`/app/user/info`).then((d) => {
					this.userLevel = d.data.level;
				});
			},
			handleSign() {},

			src(data) {
				if (data) {
					this.imgsrc = data;
					this.content = this.content.replace('display:none', '');
					this.content = this.content.replace('signImg', data);
				} else {
					this.content = this.content1;
					this.content = this.content.replace(/img src="signImg"/g,
						'img src="signImg" style="width:100px;height:75px;display:none"');
				}
			},

			payPwdPopClose() {
				// this.payPwdPopShow = !this.payPwdPopShow;

				// 	let data = {
				// 		pageSize: 20,
				// 		pageNum: this.current
				// 	};
				// 	this.$u.post('/app/financial/offline/page', data).then((res) => {});
			},
			//输入密码结束
			payPwdPopFinish(val, clear) {
				// this.payPwdPopShow = !this.payPwdPopShow;
				this.payPassword = val
				setTimeout(() => {
					this.payMent(clear)
				}, 0)



			},
			payMent(clear) {
				console.log(this.content);
				let data = {
					onlineFinancialId: this.financialId,
					amount: this.productDetail.amount,
					payPassword: this.payPassword,
					contract: this.content
				};
				this.$u.post('/app/financial/online/takePartIn', data).then((res) => {
					this.payPassword = ''
					this.payPwdPopShow = false
					this.$u.toast(this.$t('product.purchaseSucceeds'));

				}, (res) => {
					console.log('err');
					this.payPassword = ''
					this.imgsrc = ""
				});


			},
			async handleBuy() {
				const status = await this.$u.api.verifyIsSetPwdAjax(0)
				if (!status) {
					this.$refs.promptDialog.show({
						confirm: (close) => {
							uni.navigateTo({
								url: "/pages/modify/modify?type=1"
							})
							close(true)
						},
						close: (t = false) => {
							(!t) && this.publicJS.backOption()
						},
						title: this.$t('system.Hint'),
						des: this.$t('product.PleaseSet'),
						btnText: this.$t('product.GoToAdd'),
					})
					return
				}
				if (this.isBuy == 'true') {
					this.$u.toast(this.$t('product.Held'));
					return;
				} else {
					if (this.userLevel == this.limitUserLevel) {

						let data = {
							financialId: this.financialId,
							totalPrice: this.productDetail.amount
						};
						this.$u.post('/app/financial/online/getContract', data).then((res) => {
							console.log(3333, res.data.contract);
							this.showContact = !this.showContact;
							this.content = res.data.contract;
							this.content1 = res.data.contract;
							this.code = res.data.code;

						});
					} else {
						this.$u.toast(this.$t('product.purchaseError'));
					}

				}
			},
			handleHold() {
				uni.navigateTo({
					url: '/pages/moneyManagement/holdProduct'
				});
			},
			// 签订合同
			signContract() {
				if (!this.imgsrc) {
					this.$u.toast(this.$t('product.signatureError'));
					return;
				}
				this.showContact = !this.showContact;
				this.payPwdPopShow = !this.payPwdPopShow;
			},
			popupclose(){
				this.showContact=false
			},
			Customer_service(){
				console.log('这个是客服')
				this.customerServiceShow=true
			},
			// 客服外链
			toCustomer(url) {
			// #ifdef H5
			window.location.href =url;
			// #endif
			// #ifdef APP-PLUS
			plus.runtime.openURL(url)
			
			// #endif
			},
		}
	};
</script>

<style lang="scss" scoped>
	/deep/ .uni-scroll-view,
	.uni-scroll-view-content {
		overflow: hidden !important;
		font-family: PingFang SC;
	}

	.top-box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 36rpx 26rpx;
		border-radius: 36rpx;
		height: 308rpx;
		background-color: #f5f7f9;
		padding: 36rpx 32rpx;
		color: #ffffff;
		background-image: url(../../static/images/bkg1.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.tittle-name {
			display: flex;
			align-items: flex-end;

			image {
				width: 38rpx;
				height: 38rpx;
				margin-right: 8rpx;
			}

			view {
				font-size: 36rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
				width: 240rpx;
			}
		}

		.count-name {
			display: flex;
			justify-content: space-around;
			align-items: flex-end;

			.count-box {
				flex: 1;
				text-align: center;

				.tittle1 {
					font-size: 48rpx;
				}

				.tittle2 {
					display: flex;
					justify-content: center;
					align-items: flex-end;
					height: 76rpx;
				}
			}
		}
	}

	.data-box {
		position: absolute;
		left: 40rpx;
		right: 40rpx;
		overflow: auto;
		bottom: 200rpx;
		top: 400rpx;

		&:nth-child(1) {
			margin: 0 12rpx;
		}

		.form-name {
			background-color: #f5f7f9;
			height: 62rpx;
			border-radius: 36rpx;
			margin: 0 12rpx;
		}

		.property {
			display: flex;
			align-items: center;
			justify-content: space-around;

			view {
				flex: 1;
				text-align: center;
			}
		}

		.info-box {
			height: 112rpx;

			&:not(:last-child) {
				border-bottom: 1px solid #ededed;
			}

			view {
				&:nth-child(1) {
					font-size: 24rpx;
					font-weight: 400;
					color: #141414;
				}

				&:not(:first-child) {
					font-size: 24rpx;
					font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;
					font-weight: 400;
					color: #ff7157;
				}
			}
		}
	}

	.bottom-box {
		display: flex;
		padding: 46rpx 40rpx;
		justify-content: space-around;
		position: fixed;
		bottom: 0;

		.isbuy {
			background: #cfcfcf;
			color: #6b6262;
		}

		.buy-box {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 260rpx;
			height: 100rpx;
			background-color: #141414;
			color: #ffffff;
			border-radius: 26rpx;
			margin-left: 40rpx;
		}

		.hold-box {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #2934d0;
			width: 260rpx;
			height: 100rpx;
			color: #ffffff;
			border-radius: 26rpx;
			margin-left: 40rpx;
		}
	}

	.sign-btn {
		width: 70%;
		height: 120rpx;
		background-color: #141414;
		color: #ffffff;
		border-radius: 36rpx;
		font-size: 34rpx;
		text-align: center;
		line-height: 120rpx;
		position: absolute;
		bottom: 20rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.rich-text {
		// padding: 40rpx;
		padding: 100rpx 40rpx;
	}
	.closeIcon{
		padding: 80rpx 40rpx;
		position: absolute;
		right: 0;
		font-size: 30rpx;
	}
	.customerServiceBox {
		height: 100%;
		padding: 40rpx;
		flex-wrap: wrap;
		color: #fff;
		background: #1b1d29;
	
		.iconBox {
			width: 120rpx;
			height: 120rpx;
			margin: 20rpx auto;
			/* text-align: center; */
			/* line-height: 100px; */
			display: flex;
			justify-content: center;
			align-items: center;
			background: #2979ff;
			border-radius: 50%;
		}
	}
</style>